<template>
    <div class="cate">
        <div class="title">
            分类
        </div>
        <div style="padding: 10px">
            <el-input v-model="filterText" placeholder="请输入分类名称"></el-input>
            <el-button style="width: 100%; margin-top: 10px" type="primary" @click="handleEdit({})">
                <el-icon>
                    <Plus />
                </el-icon>
                添加分类
            </el-button>
        </div>
        <el-table class="cateTable" ref="singleTableRef" v-loading="loading" element-loading-text="加载中..." :data="cateList"
            height="100%" @row-click="rowClick" :highlight-current-row="true">
            <el-table-column prop="categoryName" label="分类名称">
                <template #default="scope">
                    <span>
                        {{ scope.row.categoryName }} ({{ scope.row.number }})
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="statusName" label="全部分类" width="85" align="center">
                <template #header>
                    <el-link :underline="false" type="primary" @click="setCurrent()">{{
                        '全部分类'
                    }}</el-link>
                </template>
                <template #default="scope">
                    <el-dropdown>
                        <el-icon style="cursor: pointer" :size="20">
                            <Tools />
                        </el-icon>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleEdit(scope.row)">{{
                                    '编辑分类'
                                }}</el-dropdown-item>
                                <el-dropdown-item @click="handleDel(scope.row)">{{
                                    '删除分类'
                                }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
            <slot></slot>
        </el-table>
        <cateEdit v-if="visibleCateEditForm" v-model:dialogVisible="visibleCateEditForm" :item="item"
            :handleSearch="handleSearch"></cateEdit>
    </div>
</template>
  
<script setup lang="ts">
import { ElTable } from 'element-plus'
import openMsgBox from '@/hooks/messageBox.js'
import store from '@/store'
import { libSensitiveService } from '@/api/libSensitive'
import cateEdit from './cateEdit.vue'
const props = defineProps({
    handleEdit: {
        type: Function,
    },
    selectItem: {
        type: Object,
    },

    getListFn: {
        type: Function,
    },
    type: {
        type: String,
    },

    form: {
        type: Object,
    },
    search: {
        type: Function,
    },

})
const name = props.type === 'cate' ? '分类' : '类型'
const loading = ref(false)
const cateList = ref([])
const currtRow = ref(null)
const cateFilterList = ref([])
const filterNode = (val) => {
    cateList.value = cateFilterList.value.filter((e) => {
        return e.dictionaryName.includes(val)
    })
}
const filterText = ref('')
watch(
    () => filterText,
    (val) => {
        if (val) {
            filterNode(val)
        } else {
            cateList.value = cateFilterList.value
        }
    }
)
const visibleCateEditForm = ref(false);
const item = ref({});
const handleEdit = (row) => {
    item.value = { ...row }

    visibleCateEditForm.value = true
}
const handleDel = (row) => {

    openMsgBox(
        { tips: '删除分类后，分类下的内容将一起删除。确定要删除吗' },
        () => {
            return libSensitiveService.delete({
                data: row.categoryId,
            })
        },
        () => {

            getCateList()
        }
    )
}
const rowClick = (e) => {
    currtRow.value = e;
    props.form.typeId = e?.categoryId +'' || ''
    props.search(e)
}
const handleSearch = () => {
    getCateList();
}
defineExpose({ handleSearch})
const getCateList = async () => {
    loading.value = true
    try {

        const { data } = await libSensitiveService.getList({

        })
        cateList.value = data
        cateFilterList.value = data
        store.commit(
            'cates/SET_CATELIST',
            data.map((e) => {
                return {
                    label: e.categoryName,
                    value: e.categoryId+'',
                }
            })
        )

        if (currtRow.value) {
            const currentData = cateFilterList.value.find((n) => n.categoryId == currtRow.value.categoryId)

            if (currentData) {
                nextTick(() => {
                    singleTableRef.value.setCurrentRow(currentData)
                    //props.rowClick(currentData)
                })

            } else {

            }
        }
    } catch (error) {
        cateList.value = []
    }
    loading.value = false
}

const singleTableRef = ref<InstanceType<typeof ElTable>>()
const setCurrent = (row?) => {
    singleTableRef.value!.setCurrentRow(row)

    rowClick(row)
}

onMounted(() => {
    getCateList()

})

</script>
  
<style lang="scss" scoped>
.cate {
    display: flex;
    flex-direction: column;
    background-color: #ffff;
    width: 270px;
    height: 100%;
    margin-right: 10px;
    border-right: 1px solid #e9e9e9;
    box-sizing: border-box;

    .title {
        padding: 8px 0;
        border-bottom: 1px solid #e9e9e9;
        text-align: center;
    }
}

:deep(.cateTable) {
    flex: 1;

    .el-table__row {
        cursor: pointer;
    }

    thead {
        color: #aaa !important;

        tr>.el-table__cell {
            background-color: #fff !important;
        }
    }
}
</style>
  